<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    class="tableDialog tableFormDialog"
    width="300px"
    :visible.sync="encoderVisible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'" @submit.native.prevent>
            <el-form-item prop="filePath">
                <img v-if="inputForm.filePath" :src="inputForm.filePath"  class="avatar code">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-form-item>
            <el-form-item prop="encoderContent" class="code-detail">
              <a  @click="download()" >
                <span v-if="inputForm.encoderContent">{{inputForm.encoderContent}}(点击下载)</span>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </a>
            </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    width="600px"
    class="tableDialog tableFormDialog"
    :visible.sync="imageVisible">
    <el-table v-loading="loading" :data="tableData" style="width: 100%"
      >
      <el-table-column>
        <template slot-scope="scope">
              <span>{{scope.row.fileType}}</span>
              <img v-if="scope.row.filePath" :src="scope.row.filePath" class="avatar">
          </template>
        </el-table-column>
    </el-table>
    <el-pagination class="page" background @current-change="handleCurrentChange" :page-size="page.pageSize"
      :current-page="page.pageNo" layout="prev, pager, next" :total="page.total" prev-text="上一张" next-text="下一张">
    </el-pagination>
  </el-dialog>
</div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          id: '',
          name: '',
          phone: '',
          encoderContent: '',
          filePath: '',
          idcardImagePath: '',
          credentImagePath: ''
        },
        tableData:[],
        page: {
          pageSize: 1,
          pageNo: 1,
          total: 0
        },
        encoderVisible: false,
        imageVisible: false
      }
    },
    components: {
    },
    methods: {
      init (method, id, truckNumber) {
        this.method = method
        this.inputForm.id = id
        this.inputForm.encoderContent = truckNumber
        if (method === 'viewEncoder') {
          this.title = `车辆二维码`
          this.encoderVisible = true
        } else if (method === 'viewCredent') {
          this.title = '车辆证件'
          this.imageVisible = true
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          if (method === 'viewEncoder') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/truck/truck/createTwoDimensionCode`,
              method: 'post',
              data: {'truckId': this.inputForm.id}
            }).then(({data}) => {
              this.inputForm.filePath = data.result.filePath
              this.loading = false
            })
          } else if (method === 'viewCredent') {
            this.loading = true
            this.$http({
              url: `/truck/truck/imgList?id=${this.inputForm.id}`,
              method: 'get',
              params: {
                'pageNo': this.page.pageNo,
                'pageSize': this.page.pageSize
              }
            }).then(({data}) => {
              this.tableData = data.result.list
              this.page.total = data.result.count
              this.loading = false
            })
          }
        })
      },
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.imgList(this.page)
      },
      getUrlBase64(url) {
          return new Promise(resolve => {
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
            let img = new Image()
            img.crossOrigin = 'Anonymous' //允许跨域
            img.src = url
            img.onload = function() {
              canvas.height = 300
              canvas.width = 300
              ctx.drawImage(img, 0, 0, 300, 300)
              let dataURL = canvas.toDataURL('image/png')
              canvas = null
              resolve(dataURL)
            }
          })
      },
      download() {
        // this.downloadIamge(this.inputForm.filePath, 'pic')
        this.getUrlBase64(this.inputForm.filePath).then(base64 => {
          let link = document.createElement('a')
          link.href = base64
          link.download = this.inputForm.encoderContent+'.jpg'
          link.click()
        })
      },
      imgList(params){
        this.loading = true
        this.$http({
          url: `/truck/truck/imgList?id=${this.inputForm.id}`,
          method: 'get',
          params: {
            'pageNo': params.pageNo,
            'pageSize': params.pageSize
          }
        }).then(({data}) => {
          this.tableData = data.result.list
          this.page.total = data.result.count
          this.loading = false
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import '@/assets/scss/config.scss';
    ::v-deep .el-dialog__wrapper .el-dialog {
        .el-dialog__body{
            padding-bottom: 20px !important;
        }
        .page.el-pagination{
            text-align: center;
        }
        .page.el-pagination.is-background .btn-prev, .page.el-pagination.is-background .btn-next{
            border: none;
            box-shadow: none;
            margin: 0 4px;
            span{
                margin-left: 0;
            }
        }
        .page.el-pagination.is-background .btn-prev:hover, .page.el-pagination.is-background .btn-next:hover{
            span{
                color: $--color-primary-liyu;
            }
        }
        .el-dialog__body .el-table .el-table__body tr:hover > td{
            background-color: #FFFFFF !important;
        }
        .el-table{
            .el-table__header{
                display: none;
            }
            td{
                padding: 0 !important;
                .cell{
                    span{
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #333333;
                        margin-bottom: 10px;
                        display: inline-block;
                    }
                }
            }
        }
        .el-table::before{
            display: none;
        }
        .el-form{
            .code-detail{
                text-align: center;
                margin-bottom: 0 !important;
            }
        }
    }
    .avatar{
        height: 304px;
        margin: 0 auto;
        object-fit: contain;
        border: 1px solid #d9d9d9;
    }
    .avatar.code{
        border: none;
        width: 188px;
        height: 188px;
    }
</style>
